<template>
  <div class="accessList">
    <div class="top">
      <div class="icon fl">
        <svg t="1636080522251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8290" width="25" height="25"><path d="M512 35.31965535c-275.90258348 0-500.51436187 211.45540085-500.51436187 474.01093471 0 67.11659253 11.05898399 127.9410045 32.79560769 182.47323595 54.72290355 104.86967584 86.1838063 143.38544769 94.38270826 152.53771029l2.0973935 2.28806565q-66.35390398 92.28531473-58.9176906 117.64470907c7.43621337 25.16872219 25.55006646 28.60082068 50.14677227 20.59259088q144.14813622-43.2825753 152.53771026-52.24416578l0.57201645-0.76268855 11.24965611 5.14814774c61.77777268 25.93141076 146.0548576 46.52400165 215.65018793 46.52400161 275.90258348 0 500.51436187-211.64607302 500.51436187-474.20160686S787.90258348 35.31965535 512 35.31965535z m-166.83812061 563.43616739h333.67624122a172.17694047 172.17694047 0 0 1-333.67624122-0.19067216z m0 0" p-id="8291" fill="#ffffff"></path></svg>
      </div>
      <div class="fl">
        <h5 class="title" style="margin-top: 8px">微信客服</h5>
        <p>只需将您的微信客服授权至客服系统，就可以轻松处理来自微信客服场景的用户咨询</p>
      </div>
      <el-button type="primary fr add" size="mini" @click="getConfirm">授权</el-button>
    </div>
    <div style="height: calc(100% - 102px)">
    <configTable
        ref="table"
        :headers="tableHeader"
        :data="tableData"
        :pagingData="tablePages"
        @pageChange="currentChangeFun"
        @pageSizeChange="sizeChange"
        @checkHeadersChange="checkHeadersChange"
      >
        <template slot="column">
          <template v-for="(item, index) in checkHeaders">
            <u-table-column
              v-if="!['oprate', 'processName'].includes(item.prop)"
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :width="item.width + 'px'"
              :resizable="false"
              :sortable="item.sortable"
              :show-overflow-tooltip="true"
            >
            </u-table-column>
            <u-table-column
              v-if="item.prop === 'processName'"
              :key="index"
              :label="item.label"
            >
              <template slot-scope="scope">
                 <span>{{scope.row.processName}}  <i v-functions="['wxkf_access_edit']" style="font-size: 12px; color: #B3B9C7; cursor: pointer" @click="editFun(scope.row)" class="V7_iconfont V7_iconV7tubiao_xianbianji"></i></span>
              </template>
            </u-table-column>
            <u-table-column
              v-if="item.prop === 'oprate'"
              :key="index"
              :label="item.label"
              :width="70"
              fixed="right"
            >
              <template slot-scope="scope">
                 <span class="oprate-span" @click="openService(scope.row)">客服账号设置</span>
              </template>
            </u-table-column>
          </template>
        </template>
      </configTable>
      </div>
    <drawer
      direction="rtl"
      class="wechatDrawer"
      :title="drawer.title"
      :drawer="drawer.isShow"
      @save="confirmFun"
      @cancelFun="cancelFun"
      @closeDraw="cancelFun">
      <template slot="column">
        <funTab
          :tabs="tabs"
          @input="setFunTabName"
          :value="'baseConfig'">
        </funTab>
        <accessAddOrEdit ref="wechatAccessInfo"></accessAddOrEdit>
      </template>
    </drawer>
    <ServiceDrawer ref="serviceDrawer"></ServiceDrawer>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Ref, Watch } from 'vue-property-decorator'
import configTable from '@/components/configCommon/table.vue'
import drawer from '@/common/views/drawer/index.vue'
import funTab from '@/components/cardLayout/FunTab.vue'
import accessAddOrEdit from './accessAddOrEdit.vue'
import { CommonModule } from '@/store/modules/common'
import { channelConfigMoudle } from '@/store/modules/config/channel/index'
import { commonAction, deepClone, isHasFuncOrMenus } from '@/utils/common'
import { ElForm } from 'element-ui/types/form'
import ServiceDrawer from './ServiceDrawer.vue'
import { noticeConfigModule } from '@/store/modules/config/notice/index'
interface PageObj {
  current: number
  pageSize: number
  total: number
}
interface DrawerObj {
  title: string
  isShow: boolean,
  childTabActiveName: string
}
@Component({
  name: 'wechatServiceAccessList',
  components: { configTable, drawer, accessAddOrEdit, funTab, ServiceDrawer }
})
export default class WechatServiceAccessList extends Vue {
  @Ref() private readonly wechatAccessInfo !: accessAddOrEdit
  @Ref() private readonly serviceDrawer: any
  [x: string]: any

  private checkHeaders: [] = []
  private tableHeader: any = [ // 列表表头
    { label: '企业名称', prop: 'name' },
    { label: '企业ID', prop: 'corpId' },
    { label: '会话流程', prop: 'processName' },
    { label: '绑定时间', prop: 'createTime', sortable: true, width: 145 },
    { label: '最后修改时间', prop: 'updateTime', sortable: true, width: 145 }
  ]

  private beforeMount () {
    if (isHasFuncOrMenus('wxkf_access_edit', this.$store.state.common.session.user, false)) {
      this.tableHeader.push({ label: '操作', prop: 'oprate', width: 100 })
    }
  }

  get freshTime () {
    return noticeConfigModule.refreshTime
  }

  @Watch('freshTime')
  private freshTimeChange () {
    this.tablePages.current = 1
    this.queryList()
  }

  private tablePages: PageObj = { // 翻页
    current: 1,
    pageSize: 10,
    total: 0
  }

  private drawer: DrawerObj = {
    title: '修改会话流程',
    isShow: false,
    childTabActiveName: 'baseConfig'
  }

  private tabs: any = [
    { label: '基本配置', name: 'baseConfig' }
  ]

  private imgList = [
    require('@/assets/img/bcp1.png')
  ]

  private tableData: any = [] // 列表数据

  private setFunTabName (name: string) { // 子菜单tab事件
    this.drawer.childTabActiveName = name
  }

  private checkHeadersChange (checkList) {
    this.$set(this, 'checkHeaders', checkList)
  }

  private sizeChange (size: number) { // 改变页数
    this.tablePages.pageSize = size
    this.queryList()
  }

  private currentChangeFun (page: number) { // 翻页
    this.tablePages.current = page
    this.queryList()
  }

  private queryList () { // 查询列表
    const actionData = {
      url: '/im-wechat/action/config/wxkfAuthMode/getCompanyList',
      method: 'POST',
      data: { limit: this.tablePages.pageSize, page: this.tablePages.current }
    }
    channelConfigMoudle.channelCommonAction(actionData).then((res: any) => {
      if (res && res.success) {
        const list = res.data.list || []
        if (list.length > 0) {
          list.forEach((item: any) => {
            const processObj = CommonModule.publicCache.processListObj[item.processId]
            item.processName = processObj ? processObj.name : '--'
          })
        }
        this.tableData = res.data.list
        this.tablePages.total = res.data.count || 0
      }
    })
  }

  private editFun (row: any) {
    noticeConfigModule.AddRefreshTime()
    this.drawer.isShow = true
    this.drawer.title = '修改会话流程'
    this.$nextTick(() => {
      this.wechatAccessInfo.setAccessData(row)
    })
  }

  private openService (row: any) {
    this.serviceDrawer.openDraw(row)
  }

  private cancelFun () { // 取消
    this.drawer.isShow = false
  }

  private confirmFun () { // 保存
    const formRef = this.wechatAccessInfo.$refs.accessForm as ElForm
    formRef.validate(valide => {
      if (valide) {
        const sendData = deepClone(this.wechatAccessInfo.accessForm)
        const actionData = { url: '/im-wechat/action/config/wxkfAuthMode/updateCompanyProcessId', method: 'POST', data: sendData }
        channelConfigMoudle.channelCommonAction(actionData).then(res => {
          if (res && res.success) {
            this.$message.success('操作成功')
            this.drawer.isShow = false
            this.queryList()
            this.$updateCache('channelList', sendData, '_id', true)
          }
        })
      }
    })
  }

  private async getConfirm () {
    const params = { url: '/im-wechat/action/config/wxkfAuthMode/getPreAuthUrl', method: 'POST' }
    const result: any = await commonAction(params)
    if (result.success) {
      window.open(result.data)
    }
  }

  private activated () {
    this.queryList()
  }

  private mounted () {
    this.$getCache('/im-center/action/config/processConfig/processCache', ['processList'], true).then((res: any) => {
      if (res) {
        this.queryList()
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
  .wechatDrawer
    >>> .drawer-contain
      height auto
      padding 6px 20px
  .accessList
    border 1px solid $border-main
    padding 16px
    border-radius 10px
    height 100%
    overflow auto
    box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
    box-sizing border-box
    margin 0 2px 2px 0
    height calc(100% - 40px)
    .top
      height 102px
      background-color #F4F9FD
      border-radius 4px
      width 100%
      padding 20px
      .icon
        width 40px
        height 40px
        line-height 40px
        text-align center
        margin 10px 19px 0px 0px
        background-color #5DB069
        border-radius 50%
        display flex
        svg
          margin auto
          width 20px
      .title
        color $fc-gray2
        margin-bottom 5px
      .add
        margin-top 15px
      p
       color #686E84
    .instiutionTableBox
      height calc(100% - 102px)
</style>
<style lang="stylus">
  .ecodeDialog
    height 75%
    .el-dialog__body
      height 75%
  .oprate-span
    cursor pointer
    color $c-main
    margin 0 4px
  .red-span,.disable-span
    color $c-danger
  .enable-span
    color $c-green
  .disable-span,.enable-span
    font-size 12px
</style>
